/*
 * @Author: mayijun
 * @Date: 2022-05-11 09:46:18
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-14 11:25:23
 */
//任务历史列表
import Table from "@/components/Table";
import API from "@/services";
import { ElMessage } from "element-plus";
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from '@/store';
import * as RouteNames from '@/router/consts';
import Status from "@/components/status";

const HistoryList = defineComponent({
  name: 'HistoryList',
  props: {
    pageData: {
      type: Object,
      default: () => ({
        list: [],
        total: 0,
        pageNum: 1,
        pageSize: 10
      })
    }
  },
  emits: ['currentChange', 'pageSizeChange', 'selectKeys', 'sortTable','execTask', 'logInfo'],
  setup: (props, { slots, attrs, emit }) => {

    const store = useStore();
    const router = useRouter();

    const state: any = reactive({
      detailLoading: false,
      column: [
        {
          type: 'selection',
          width: 55
        },
        {
          prop: 'id',
          label: '历史任务ID',
          width: 120,
          sortable: true
        },
        {
          label: '任务名称',
          slotRenderName: 'taskNameSlot'
        },
        {
          label: '提交人',
          prop: 'taskOwner'
        },
        {
          label: '提交时间',
          prop: 'startTime',
          sortable: true
        },
        {
          label: '任务类型',
          prop: 'cycleType',
          slotRenderName: 'cycleTypeDescSlot',
        },
        {
          label: '任务耗时(毫秒)',
          prop: 'costTime',
        },
        {
          label: '状态',
          prop: 'status',
          default: ({ row }: any) => (
            <Status color={statusCode(row.status)} name={row.statusDesc}></Status>
          )
        },
        {
          label: '操作',
          default: ({ row }: any) => {
            if (row.status === 3 || row.status === 4) {
              return (
                <el-button type="text"
                  onClick={() => { seeLogInfo(row) }}
                > 日志</el-button>
              )
            } else if (row.status !== 2) {
              return (
                <el-button type="text"
                  onClick={() => { doExecTask(row.id) }}> 执行</el-button>
              )
            }
          }
        }
      ]
    });

    const statusCode = (code: number) => {
      switch (code) {
        case 1:
          return 'blue';
        case 2:
          return 'orange';
        case 3:
          return 'red';
        case 4:
          return 'green';
        default:
          return '';
      }
    }

    const handleSelectionChange = (rows: any) => {
      const keys = rows.map((item: any) => item.id);
      emit('selectKeys', keys);
    }
    const handleCurrentChange = (v: any) => {
      emit('currentChange', v);
    }
    const handlePageSizeChange = (size: any) => {
      emit('pageSizeChange', size);
    }
    const onSortChange = (params: any) => {
      emit('sortTable', params);
    }

    const doExecTask = (histaskId: any) => {
      emit('execTask', histaskId);
    }
    const seeLogInfo = (row: any) => {
      emit('logInfo', row.id);
    }
    // 获取任务及模型详情
    const getTaskModelDetail = async (rowData: any) => {
      // 需要区分是场景取数还是DIY取数(cycleType === 1 代表场景  2代表DIY)
      if (rowData.type === 1) {
        router.push({
          name: RouteNames.ROUTE_APPLICATIONFETCHSCENE,
          query: { taskId: rowData.taskId }
        });
      } else {
        router.push({
          name: RouteNames.ROUTE_APPLICATIONFETCHSELF,
          query: { taskId: rowData.taskId }
        });
      }
    }

    return () => {
      return (
        <Table
          data={props.pageData.list}
          v-loading={state.detailLoading}
          style="width: 100%"
          onSortChange={onSortChange}
          onSelectionChange={handleSelectionChange}
          column={state.column}
          onPageCurrentChange={handleCurrentChange}
          onPageSizeChange={handlePageSizeChange}
          pagination={{
            total: Number(props.pageData.total),
            currentPage: props.pageData.pageNum,
            pageSize: props.pageData.pageSize
          }}
          v-slots={{
            taskNameSlot: (scope: any) => (
              <a href="javascript:void(0)"
                onClick={() => getTaskModelDetail(scope.row)}
                class="task-name-link">
                {scope.row.taskName}
              </a>
            ),
            cycleTypeDescSlot: (scope: any) => (
              <span>{scope.row.cycleTypeDesc}</span>
            ),
          }}
        >
        </Table >
      );
    }
  }
});

export default HistoryList;
